<template>
  <div>
    <div class="row minw100">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">              
          <div class="portlet-body">
            <ul class="nav nav-tabs">
              <li>
                <router-link :to="{path:'/wbjhglxx',query: {type: 'infor'}}" tag="a">
                   填写基础信息
                </router-link>
              </li>
              <li>
                <router-link :to="{path:'/wbjhglzx',query: {type: 'infor'}}" tag="a" class="">
                   确认计划执行项目
                </router-link>
              </li>
              <li class="active">
                <router-link to="/wbjhglxxrw" tag="a" class="">
                   确认计划内任务
                </router-link>
              </li>
             
            </ul>
            <div class="row color mbStyle">
              <div class="col-md-2 mb10" style="padding-left: 0;">
                <input type="text" placeholder="请输入关键字" class="form-control">
              </div>
              <div class="col-md-1 mb10">
                <button class="btn green">查询 <i class="fa fa-search"></i></button>
              </div>
            </div>
            <div class="row focusNone">
              <div class="tableDiv">
                <el-table
                  ref="multipleTable"
                  :data="list"
                  :border = true
                  :stripe = true
                  :row-class-name="tableRowClassName"
                  style="width: 100%"
                  >
                 
                  <el-table-column
                    label="序号"
                    :formatter="formatter"
                    width="100"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="case_name"
                    label="任务名称"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="case_name"
                    label="责任人"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="case_name"
                    label="检查人"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="case_name"
                    label="当前状态"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="case_name"
                    label="执行人"
                    >
                  </el-table-column>
                  <el-table-column
                    prop="case_name"
                    label="任务完成时间"
                    >
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="200">
                    <template scope="scope">
                      <el-button @click="lookData(scope.row,scope.$index)" class="look" type="text" size="small">查看</el-button> |
                     
                    </template>
                  </el-table-column>
                  
                </el-table>
               
                <div class="block">                    
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15]"
                    :page-size="page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
              </div>
              <div class="col-md-12" style="position: relative;margin-top: 20px;">
                <div style="text-align: center;">
                  <router-link to="/wbrwgl" class="btn blue" tag="a">
                     返回
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择部门开始 -->
    <div id="seDepart" class="modal fade" tabindex="-1" data-width="380">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">选择人员</h4>
      </div>
      <div class="modal-body">
        <div class="row m0 style auto">
          <div class="col-md-9">
            <input class="form-control w100" placeholder="关键字"  type="text">
          </div>
          <div class="col-md-3 mb10" style="margin-bottom: 15px;">
            <button class="btn green">查询</button>
          </div> 
          <div class="col-md-12">
            <el-radio-group v-model="radio">
              <el-radio v-for="(item,index) in people" :label="item.id">{{item.name}} {{item.phone}} {{item.job}}</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn blue">提交</button>
        <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
      </div>
    </div>              
    <!-- 选择部门结束 --> 
    
  </div>

</template>

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
    input.form-control,.bs-select.form-control{width: 95%;display: inline;}
    .col-md-9{color: #333;font-weight: 500;}
      .col-md-6.color{margin-bottom: 10px;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .col-md-6.color .col-md-3{color: #666;font-weight: 500;position: relative;top: 5px;}
    .numData{font-size: 16px;}
    .col-md-12.color .col-md-3{margin-bottom: 10px;}
    .tree-view-item-key {
      font-size: 20px;
      color: black;
    }
    .portlet.box>.portlet-body {
        background-color: #fff;
        padding: 65px 10px;
    }

    .tree-view-item-value {
        font-size: 20px;
        font-weight: bold;
        color: white;
    }
    /*.col-md-6.top{position: relative;top: -70px;}*/
    .errorInfor {
        right: 40px;
    }
    .halo-tree{position: relative;}
    .deptDiv{position: absolute;left: 15px;right: 15px;top: 34px;z-index:100;background: #fff;border: 1px solid #dbdbdb;border-top:none;padding: 0 12px;}
    .focusNone{width: 1000px;margin: 0 auto;}
    input.form-control,.bs-select.form-control{width: 100%;}
    .el-radio{display: block;margin-left: 15px;margin-bottom: 10px;}
    .focusNone .col-md-12 button, .focusNone .col-md-12 a{left: -240px;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>

<script>

  import '../../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import Metronic from '../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../static/js/pages/tips.js';
  import ComponentsPickers from '../../../../../static/js/pages/components-pickers.js';
  import optVue from '../../../../config/optVue.js';

  export default {
    data(){
      return{
        type:'',
        is_modifly:true,
        title:"",
     
        xqList:[
          {value:1,label:"片区1"},
          {value:1,label:"片区1"}
        ],
        area_id:-1,
        selectedXq:-1,

        mbList:[
          {value:1,label:"片区1"},
          {value:1,label:"片区1"}
        ],
        mb_id:-1,
        selectedMb:-1,

        dxList:[
          {value:1,label:"片区1"},
          {value:1,label:"片区1"}
        ],
        dx_id:-1,
        selectedDx:-1,

        zqList:[
          {value:1,label:"2017"},
          {value:1,label:"2018"}
        ],
        zq_id:-1,
        selectedZq:-1,
        radio:1,
        people:[
          {id:1,name:"张三",phone:"15111957698",job:"总经理"},
          {id:2,name:"张三",phone:"15111957698",job:"总经理"},
          {id:3,name:"张三",phone:"15111957698",job:"总经理"}
        ],
        currentPage:1,
        pages:1000,
        loading:false,
        multipleSelection: [],
        kw:"",
        options: []

      }
    },
    components: {
        
    },
    mounted(){
      document.title = '模板任务计划管理';
      this.title = document.title;
      var that = this;

      this.type = this.$route.query.type;
      var dataArr = {
        ril : "S"
      }
      optVue.getFjListgl(this,dataArr);
      if(this.type=='update'){ //修改
        this.rtu_id = window.localStorage.getItem('rtu_id');
        optVue.getModifyRTU(this,this.rtu_id);
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
      }

      if(this.type=='infor'){ //修改

        this.rtu_id = window.localStorage.getItem('rtu_id');
        optVue.getModifyRTU(this,this.rtu_id);
        this.is_modifly = true;
      }
      

      if(that.type!='infor'){
        $('.date-picker1').datepicker({
          rtl: Metronic.isRTL(),
          orientation: "left",
          autoclose: true,
          format: "yyyy-mm-dd"
        }).on('changeDate',function(){
          that.mfg_date = $(this).val();
        }); 
        $('.date-picker2').datepicker({
            rtl: Metronic.isRTL(),
            orientation: "left",
            autoclose: true,
            format: "yyyy-mm-dd"
          }).on('changeDate',function(){
            that.exp_date = $(this).val();
        });
      
      }
      

    },
    methods:{     
      handleSizeChange(val) {
        var pageArr = {
          page_num:this.currentPage,
          page_size : val
        }
        this.pageFun(pageArr);
      },
      handleCurrentChange(val) {
        var pageArr = {
          page_num : val,
          page_size : this.page_size
        }
        this.pageFun(pageArr);
      },
      pageFun:function(pageArr){
        this.loading = false;
        optVue.ygglNowPag(this,pageArr)
      },
   
     
      prev:function(e){
        
        if(this.isValidate(e)){
          var dataArr = {
            rtu_name:this.rtu_name,
            rtu_no:this.rtu_no,
            room_id:this.room_id,
            ip:this.ip,
            port:this.port,
            status:this.status,
            mfg_date:this.mfg_date,
            exp_date:this.exp_date,
            mfg_company:this.mfg_company,
            extra_desc:this.extra_desc
          }

          console.log(JSON.stringify(dataArr))
          optVue.addModifyRtu(this,dataArr,Tips,this.rtu_id);
        } 
      },
      next:function(e){
        this.$router.push({path:'/wbjhglfk', query: {type: 'add'}})
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArr.push(val[i].area_id)
          }
        }else{
          this.idArr = [];
        }
       
        //console.log(JSON.stringify(this.idArr))
      },
      tableRowClassName(row, index) {
          //把每一行的索引放进row
          row.index = index
      },
      formatter(row, column ,cellValue) {
          //放回索引值
          return (this.page_num-1)*this.page_size+row.index+1
      },  

    }
  
  }


</script>



